<template>
	<button :open-type="openType" :disabled="disabled_" class="c-btn" @click="handleClick" :loading="loading_" :class="[
		plain_ ? `c-btn--${type}__plain`: '',
		disabled_ ? 'c-btn--disabled': '',
		`c-btn--${type}`,
		`c-btn--${size}`,
		`c-btn--${shape}`
		]"
	 :style="[ style_ ]" @getphonenumber="handleGetphonenumber" @getuserinfo="handleGetuserinfo" @error="handleError"
	 @opensetting="handleOpensetting" @launchapp="handleLaunchapp">
		<slot></slot>
	</button>
</template>

<script>
	export default {
		name: 'c-button',
		props: {
			type: {
				type: String,
				default: 'default'
			},
			/**
			 * 按钮大小
			 * mini 小
			 * normal 正常大小
			 * large 大按钮
			 */
			size: {
				type: String,
				default: 'normal'
			},
			//是否镂空
			plain: {
				type: [String, Boolean],
				default: false
			},
			//禁用状态
			disabled: {
				type: [String, Boolean],
				default: false
			},
			//是否开启加载状态
			loading: {
				type: [String, Boolean],
				default: false
			},
			/**
			 * 按钮形状
			 * square 圆角矩形
			 * circle 两边为半圆形
			 */
			shape: {
				type: String,
				default: 'square'
			},
			openType: {
				type: String,
				default: ''
			},
			height: {
				type: [String, Number],
				default: ''
			},
			width: {
				type: [String, Number],
				default: ''
			},
			radius: {
				type: [String, Number],
				default: 'false'
			}
		},
		computed: {
			loading_() {
				return String(this.loading) === 'false' ? false : true;
			},
			plain_() {
				return String(this.plain) === 'false' ? false : true;
			},
			disabled_() {
				return String(this.disabled) === 'false' ? false : true;
			},
			style_() {
				let style = {};
				this.width && (style.width = this.$c.formatUnit(this.width));
				this.height && (style.height = this.$c.formatUnit(this.height));
				String(this.radius) !== 'false' && (style.borderRadius = this.$c.formatUnit(this.radius));
				return style;
			}
		},
		methods: {
			handleGetphonenumber(e) {
				this.$emit('getphonenumber', e);
			},
			handleGetuserinfo(e) {
				this.$emit('getuserinfo', e);
			},
			handleError(e) {
				this.$emit('error', e);
			},
			handleOpensetting(e) {
				this.$emit('opensetting', e);
			},
			handleLaunchapp(e) {
				this.$emit('launchapp', e);
			},
			handleClick(e) {
				this.$emit('click', e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.c-btn {
		height: $button-height;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1.4;
		font-size: $font-base;
		text-align: center;
		position: relative;
		font-weight: 400;
		border-radius: $border-radius-base;
		background-color: #fff;
		color: #333;
		padding: 0 $spacing-row-base;
		margin: 0;
		/* #ifdef APP-PLUS-NVUE */
		border: 1px solid rgba(0, 0, 0, .2);
		/* #endif */
		/* #ifndef APP-PLUS-NVUE */
		border: none;
		/* #endif */

		&--inherit__plain {
			border-color: inherit;
			border-width: 1px;
			border-style: solid;
		}

		/* #ifndef APP-PLUS-NVUE */
		&::after {
			content: " ";
			width: 200%;
			height: 200%;
			position: absolute;
			top: 0;
			left: 0;
			border: 1px solid rgba(0, 0, 0, .2);
			transform: scale(.5);
			transform-origin: 0 0;
			border-radius: 2 * $border-radius-base;
		}
		/* #endif */

		&--mini {
			height: $button-height-sm;
			font-size: $font-sm;
			padding: 0 $spacing-row-sm;
			border-radius: $border-radius-sm;
			/* #ifndef APP-PLUS-NVUE */
			&::after {
				border-radius: 2 * $border-radius-sm;
			}
			/* #endif */
		}

		&--large {
			height: $button-height-lg;
			font-size: $font-lg;
			padding: 0 $spacing-row-lg;
			border-radius: $border-radius-lg;

			/* #ifndef APP-PLUS-NVUE */
			&::after {
				border-radius: 2 * $border-radius-lg;
			}
			/* #endif */
		}

		&--primary {
			color: #fff;
			background-color: $color-primary;

			/* #ifndef APP-PLUS-NVUE */
			&::after {
				border-color: $color-primary;
			}
			/* #endif */
		}

		&--info {
			color: #fff;
			background-color: $color-info;

			/* #ifndef APP-PLUS-NVUE */
			&::after {
				border-color: $color-info;
			}
			/* #endif */
		}

		&--success {
			color: #fff;
			background-color: $color-success;

			/* #ifndef APP-PLUS-NVUE */
			&::after {
				border-color: $color-success;
			}
			/* #endif */
		}

		&--warning {
			color: #fff;
			background-color: $color-warning;

			/* #ifndef APP-PLUS-NVUE */
			&::after {
				border-color: $color-warning;
			}
			/* #endif */
		}

		&--danger {
			color: #fff;
			background-color: $color-danger;

			/* #ifndef APP-PLUS-NVUE */
			&::after {
				border-color: $color-danger;
			}
			/* #endif */
		}

		&--disabled {
			opacity: .5;
			cursor: not-allowed;
		}

		&--circle {
			border-radius: $button-height-lg / 2;
		}

		&--primary__plain {
			background-color: transparent;
			color: $color-primary;
		}

		&--info__plain {
			background-color: transparent;
			color: $color-info;
		}

		&--success__plain {
			background-color: transparent;
			color: $color-success;
		}

		&--warning__plain {
			background-color: transparent;
			color: $color-warning;
		}

		&--danger__plain {
			background-color: transparent;
			color: $color-danger;
		}

		&--inherit {
			color: inherit;
			background-color: inherit;
			/* #ifndef APP-PLUS-NVUE */
			&::after {
				display: none;
			}
			/* #endif */
		}
	}
</style>
